
var data_val=[2220, 12, 2791, 3000, 5090, 3230, 2910];
var day_val=['0:00','1:00', '2:00', '3:00', '4:00','5:00','6:00','7:00',
'8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00',
'16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
var week_val=['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var month_val=['week1', 'week2', 'week3', 'week4'];
var year_val=['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];

var xAxis_val=week_val;
var data_val1=[0,0,0,0,0,0,0];
var option = {
    backgroundColor:'#293042',
    grid:{
        left:10,
        top:'10%',
        bottom:20,
        right:40,
        containLabel:true
    },
    tooltip:{
        show:true,
        backgroundColor:'#384157',
        borderColor:'#384157',
        borderWidth:1,
        formatter:'{b}:{c}',
        extraCssText:'box-shadow: 0 0 5px rgba(0, 0, 0, 1)'
    },
    legend:{
        right:0,
        top:0,
        data:['Income'],
         textStyle:{
            color :'#5c6076'
        }
    },
    title: {
        text: 'week-income',
        x:'4.5%',
        top: '1%',
        textStyle:{
        color :'#5c6076'
        }
    },
    xAxis: {
        data: xAxis_val,
        boundaryGap:false,
        axisLine:{
            show:false
        },
         axisLabel: {
            textStyle: {
                color: '#5c6076'
            }  
        },
        axisTick:{
            show:false
        }
    },
    yAxis: { 
        ayisLine:{
            show:false
        },
         axisLabel: {
            textStyle: {
                color: '#5c6076'
            }  
        },
        splitLine:{
            show:true,
            lineStyle:{
                color:'#2e3547'
            }
        },
        axisLine: {
                lineStyle: {
                    color: '#384157'
                }
            }
    },
    
    series: [
        {
            type: 'bar',
            name:'linedemo',
            
            
            tooltip:{
                show:false
            },
            animation:false,
            barWidth:1.4,
            hoverAnimation:false,
            data:data_val,
            itemStyle:{
                normal:{
                    color:'#f17a52',
                    opacity:0.6,
                    label:{
                        show:false
                    }
                }
            }
        },
        {
            type: 'line',
            name:'Income',
            
            animation:false,
            symbol:'circle',
    
            hoverAnimation:false,
            data:data_val1,
            itemStyle:{
                normal:{
                    color:'#f17a52',
                    opacity:0,
                }
            },
            lineStyle:{
                normal:{
                    width:1,
                    color:'#384157',
                    opacity:1
                }
            }
        },
        {
            type: 'line',
            name:'linedemo',
            smooth:true,
            symbolSize:10,
            animation:false,
            lineWidth:1.2,
            hoverAnimation:false,
            data:data_val,
            symbol:'circle',
            itemStyle:{
                normal:{
                    color:'#f17a52',
                    shadowBlur: 40,
                    label:{
                        show:true,
                        position:'top',
                        textStyle:{
                            color:'#f17a52',
                    
                        }
                    }
                }
            },
           areaStyle:{
                normal:{
                    color:'#f17a52',
                    opacity:0.08
                }
            }
            
        }
    ]
};
/*
var day_val=['1:00', '2:00', '3:00', '4:00','5:00','6:00','7:00',
             '8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00',
             '16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'];
             var week_val=['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
             var month_val=['week1', 'week2', 'week3', 'week4'];
             var year_val=['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
*/

$(document).ready(function () {
	

	
	var myDate = new Date();
	var baseYear=myDate.getFullYear();
	var baseMonth=myDate.getMonth();
	var baseWeek=myDate.getDay();
	var baseDay=myDate.getDate();
	var baseHour=myDate.getHours();
	var mytime=myDate.toLocaleString( );     //获取当前时间
	
	var dayVal=[];
	for(var i=0;i<24;i++){
		dayVal.push((baseHour+i+1)%24);
	}
	var weekVal=[];
	for(var i=0;i<7;i++){
		weekVal.push(week_val[(baseWeek+i+1)%7]);
	}
	var monthVal=[];
	for(var i=0;i<4;i++){
		monthVal.push(month_val[i]);
	}
	var yearVal=[];
	for(var i=0;i<12;i++){
		yearVal.push(year_val[(baseMonth+i+1)%12]);
	}
	
	
	    var incomeData=$('#incomeData').val();
	   var incomeJsonData=$.parseJSON(incomeData);
	    	
	   var dayChart = echarts.init(document.getElementById('dayIncome'));
		option.series[0].data=incomeJsonData.dayIncome;
		option.series[2].data=incomeJsonData.dayIncome;
		option.title.text="Income - lastday of- "+mytime;
		option.xAxis.data=dayVal;
		dayChart.setOption(option);
		
		var weekChart = echarts.init(document.getElementById('weekIncome'));
		option.series[0].data=incomeJsonData.weekIncome;
		option.series[2].data=incomeJsonData.weekIncome;
		option.title.text="Income - last week of - "+mytime;
		option.xAxis.data=weekVal;
		weekChart.setOption(option);
		
		var monthChart = echarts.init(document.getElementById('monthIncome'));
		option.series[0].data=incomeJsonData.monthIncome;
		option.series[2].data=incomeJsonData.monthIncome;
		option.title.text="Income - last month of - "+mytime;
		option.xAxis.data=monthVal;
		monthChart.setOption(option);
		
		var yearChart = echarts.init(document.getElementById('yearIncome'));
		option.series[0].data=incomeJsonData.yearIncome;
		option.series[2].data=incomeJsonData.yearIncome;
		option.title.text="Income - last year of - "+mytime;
		option.xAxis.data=yearVal;
		yearChart.setOption(option);
		
		
		
// 选择日期模块
		$("#pickdate-day").dateDropper({
			animate: true,
			format: 'Y-m-d',
			maxYear: baseYear
		});
		$("#pickdate-week").dateDropper({
			animate: false,
			format: 'Y-m-d',
			maxYear: baseYear
		});
		$("#pickdate-month").dateDropper({
			animate: false,
			format: 'Y-m-d',
			maxYear: baseYear
		});
		$("#pickdate-year").dateDropper({
			animate: false,
			format: 'Y-m-d',
			maxYear: baseYear
		});
		
		$("#pickdate-day").change(function(){
			
			var date=$(this).val();
			
			$.ajax
			({
				url:"/order/income",
				type:"post",
				dataType:"text",
				data:{
					date:date,
					type:6// 和 java 的 Calendar.DAY_OF_YEAR 值一致
				},
				success:function(responseText){
					var incomeJsonData=$.parseJSON(responseText);
					var dayChart = echarts.init(document.getElementById('dayIncome'));
					option.series[0].data=incomeJsonData.dayIncome;
					option.series[2].data=incomeJsonData.dayIncome;
					option.title.text="Income - day - "+date;
					option.xAxis.data=day_val;
					dayChart.setOption(option);					
				}
			});
			return false;
			
		});
		
		$("#pickdate-week").change(function(){
			var date=$(this).val();
			var mydate=new Date(date);
			$.ajax
			({
				url:"/order/income",
				type:"post",
				dataType:"text",
				data:{
					date:date,
					type:3// 和 java 的 Calendar.WEEK_OF_YEAR 值一致
				},
				success:function(responseText){
					baseWeek=mydate.getDay();
					var incomeJsonData=$.parseJSON(responseText);
					var weekChart = echarts.init(document.getElementById('weekIncome'));
					option.series[0].data=incomeJsonData.weekIncome;
					option.series[2].data=incomeJsonData.weekIncome;
					mydate.setDate((mydate.getDate())+7);
					option.title.text="Income -week - "+date+" - "+mydate.toLocaleString();
					
					for(var i=0;i<7;i++){
						weekVal.push(week_val[(baseWeek+i+1)%7]);
					}
					option.xAxis.data=weekVal;
					weekChart.setOption(option);					
				}
			});
			return false;
			
		});
		$("#pickdate-month").change(function(){
			var date=$(this).val();
			var mydate=new Date(date);
			$.ajax
			({
				url:"/order/income",
				type:"post",
				dataType:"text",
				data:{
					date:date,
					type:2// 和 java 的 Calendar.MONTH 值一致
				},
				success:function(responseText){
					var incomeJsonData=$.parseJSON(responseText);
					var monthChart = echarts.init(document.getElementById('monthIncome'));
					option.series[0].data=incomeJsonData.monthIncome;
					option.series[2].data=incomeJsonData.monthIncome;
					mydate.setMonth(mydate.getMonth()+1);
					option.title.text="Income -month - "+date+" - "+mydate.toLocaleString();
					option.xAxis.data=month_val;
					monthChart.setOption(option);					
				}
			});
			return false;
			
		});
		$("#pickdate-year").change(function(){
			var date=$(this).val();
			var mydate=new Date(date);
			$.ajax
			({
				url:"/order/income",
				type:"post",
				dataType:"text",
				data:{
					date:date,
					type:1// 和 java 的 Calendar.YEAR 值一致
				},
				success:function(responseText){
					baseMonth=mydate.getMonth();
					var incomeJsonData=$.parseJSON(responseText);
					var yearChart = echarts.init(document.getElementById('yearIncome'));
					option.series[0].data=incomeJsonData.yearIncome;
					option.series[2].data=incomeJsonData.yearIncome;
					mydate.setFullYear(mydate.getFullYear()+1);
					option.title.text="Income - year - "+date+" - "+mydate.toLocaleString();
					var myYearVal=[];
					for(var i=0;i<12;i++){
						myYearVal.push(year_val[(baseMonth+i+1)%12]);
					}
					option.xAxis.data=myYearVal;
					yearChart.setOption(option);					
				}
			});
			return false;
			
		});
		
});
